<template>
  <div class="list-page flex">
    <div class="list-page-head flex">
      <div class="list_url-title" v-show="title">
        <slot v-if="$slots.title"/>
        <p v-else>{{title}}</p>
      </div>
      <FormSlot class="list_url-form" ref="refFormSlot" v-show="show_search && computed_has_search" inline @submit="form_data=$event" @reset="form_data=$event">
        <slot name="form"></slot>
      </FormSlot>
      <div class="button-list">
        <el-button @click="show_search = !show_search" v-if="computed_has_search">{{show_search?'收起':'展开'}}搜索</el-button>
        <slot name="buttons"></slot>
      </div>
      <slot name="head_extend"></slot>
    </div>
    <RequestTableSlot class="list-page-body" :request_data="request_data"
                      :cols="cols"
                      :default_order="default_order"
                      :has_select="has_select"
                      :row_class="row_class"
                      :cell_class="cell_class"
                      :url="url"
                      :list_handle="list_handle"
                      :limit="limit"
                      :default_page="default_page"
                      :load_before="load_before"
                      :load_after="load_after"
    >
      <template v-for="(slot, name) in $slots" v-slot:[name]="data">
        <slot :name="name" v-bind="data"></slot>
      </template>
    </RequestTableSlot>
  </div>
</template>

<script setup lang="ts">
import FormSlot from "@/components/slot/FormSlot.vue";
import {computed, inject, type PropType, type Ref, ref, useTemplateRef} from "vue";
import {provideIframe} from "@/components/provide_keys.ts";
// @ts-ignore
import RequestTableSlot from "@/components/slot/RequestTableSlot.vue";
import type {TypeCol} from "@/components/slot/TableSlot.vue";

const props = defineProps({
  cols: {
    type: Object as PropType<{[name:string|number]: TypeCol}>,
    default: {},
  },
  default_order: {
    type: String,
    default: '',
  },
  has_select: {
    type: Boolean,
    default: true,
  },
  row_class: {
    type: [String, Function] as PropType<string | ((data: { row: any, rowIndex: number }) => string)>,
  },
  cell_class: {
    type: [String, Function]  as PropType<string | ((data: { row: any, column: any, rowIndex: number, columnIndex: number }) => string)>,
  },
  url: {
    type: String,
    required: true,
  },
  list_handle: {
    type: Function as PropType<(list:any[])=>any[]>,
    default: (list:any[])=>list
  },
  limit: {
    type: [String, Number],
    default: 20,
  },
  default_page: {
    type: [String, Number],
    default: 1,
    _tip_: '默认的的页码'
  },
  load_before: {
    type: Function as PropType<(request_data:{[name:string]: any})=>boolean|Promise<boolean>>,
    default: (request_data:any)=>true
  },
  load_after: {
    type: Function as PropType<(res:any)=>any>,
    default: (val:any)=>val
  },
  // --------- 以上为透传的 RequestTableSlot 参数 ----------
  title: {
    type: String
  },
})
const emit = defineEmits(['change:selected', 'update:page', 'loaded'])

type TypeFormSlot = InstanceType<typeof FormSlot>
const refFormSlot = useTemplateRef<TypeFormSlot>('refFormSlot');

const injectIframe = inject(provideIframe, undefined);

const show_search = ref(!injectIframe);
const computed_has_search = computed(()=>{
  if (refFormSlot.value) {
    return !!Object.keys(refFormSlot.value.computed_data).length;
  }
  return false;
})
const form_data:Ref<{[name:string]: any}> = ref({})
const request_data = computed(()=>{
  let data = form_data.value;
  return Object.keys(data).reduce((res:Record<string, any>, key)=>{
    let val = data[key];
    if (val) res[key] = val;
    return res;
  }, {})
})

function submit(data:{[name:string]: any}){
  form_data.value = data;
}
function reset(data:{[name:string]: any}){
  form_data.value = data;
}

</script>

<style scoped>
.list-page{display: flex;flex-direction: column;height: 100%;width: 100%;padding: 10px;background: var(--color-bg);border-radius: 8px;overflow: hidden;}
.list-page>.list-page-head{display: flex;flex-wrap: wrap;width: 100%;}
.list-page .list_url-title{width: auto;padding: 20px 0;}
.list-page .list_url-title>p{height: 16px;line-height: 16px;border-left: 4px solid var(--color-primary);padding-left: 1em;}
.list-page .button-list{display: flex;flex-grow: 1;flex-basis: 200px;padding: 10px 0;justify-content: flex-end;flex-wrap: wrap;}
.list-page-body{width: 100%;flex-grow: 1;flex-shrink: 1;}
</style>